<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/frame/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/frame/flyres/css/global.css}">
</head>
<body>
<div th:replace="customer/top :: topBar"></div>
<div class="layui-row">
    <div class="layui-card">
        <div class="layui-card-body" style="text-align: center">
            <div class="layui-input-inline" style="width: 50%">
                <input placeholder="请输入搜索关键词" class="layui-input" id="ikey">
            </div>
            <div class="layui-input-inline">
                <button class="layui-btn" onclick="dodosearch()"><i class="layui-icon layui-icon-search"></i>搜索文档
                </button>
            </div>
        </div>
    </div>
</div>
<div class="layui-container">
    <div class="layui-row layui-col-space15" style="margin-top: 15px">
        <div class="layui-col-md9">
            <div class="layui-carousel" id="test1" lay-filter="test1">
                <div carousel-item="">
                    <div th:each="it : ${banners}">
                        <a th:href="@{'/document/documentDetail?docid='+${it.document.docid}}">
                            <img th:src="@{'/picture/getBanner?fileName='+${it.picurl}}" width="100%" height="100%">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header" align="center">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-sm5">
                            <h3>收录文档</h3>
                        </div>
                        <div class="layui-col-sm2">
                            <h2 style="color:black">|</h2>
                        </div>
                        <div class="layui-col-sm5">
                            <h3>注册用户</h3>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body" align="center">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-sm5">
                            <h2 style="color:#1abc9c" th:text="${docNum}"></h2>
                        </div>
                        <div class="layui-col-sm2">
                            <h2 style="color:black">|</h2>
                        </div>
                        <div class="layui-col-sm5">
                            <h2 style="color:#1abc9c" th:text="${userNum}"></h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body" align="center">
                    <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="showUpload(0)"
                            th:if="${session.current_customer} eq null">上传文档
                    </button>
                    <button class="layui-btn layui-btn-normal layui-btn-fluid" onclick="showUpload(1)"
                            th:if="${session.current_customer} ne null">上传文档
                    </button>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header" align="center">热门文档</div>
                <div class="layui-card-body">
                    <ul class="">
                        <li th:each="item : ${hotdocs}">
                            <div class="layui-row">
                                <div class="layui-col-md10">
                                    <img width="20px" th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}"
                                         height="20px"/>
                                    <a th:href="@{'/document/documentDetail?docid='+${item.docid}}"
                                       class="jie-title" th:text="${item.title}"></a>
                                </div>
                                <div class="layui-col-md2" style="text-align: right">
                                    <i class="layui-icon layui-icon-fire" style="color: red;" th:text="${item.hot}"></i>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 分类热门卡片区域-->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            热门推荐
                        </div>
                        <div class="layui-col-md4" style="text-align: right">
                            <a th:href="@{/document/searchDoc}">更多<i class="layui-icon layui-icon-next"></i></a>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md5">
                            <img th:src="@{/imgs/cover-coding.png}" width="100%" height="100%">
                        </div>
                        <div class="layui-col-md7">
                            <div class="layui-row layui-col-space15" th:each="item : ${hotdocs}">
                                <div class="layui-col-md12">
                                    <img th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}" width="20px"
                                         height="20px"/>
                                    <a th:href="@{'/document/documentDetail?docid='+${item.docid}}"
                                       class="jie-title" th:text="${item.title}">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            教育专区
                        </div>
                        <div class="layui-col-md4" style="text-align: right">
                            <a th:href="@{/document/searchDoc?groupid=5}">更多<i
                                    class="layui-icon layui-icon-next"></i></a>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md5">
                            <img th:src="@{/imgs/cover-compute.png}" width="100%" height="100%">
                        </div>
                        <div class="layui-col-md7">
                            <div class="layui-row layui-col-space15" th:each="item,itemsStat : ${tps.g0}"
                                 th:if="${itemsStat.index} lt 5">
                                <div class="layui-col-md12">
                                    <img th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}" width="20px"
                                         height="20px"/>
                                    <a th:href="@{'/document/documentDetail?docid='+${item.docid}}"
                                       class="jie-title" th:text="${item.title}">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            专业资料
                        </div>
                        <div class="layui-col-md4" style="text-align: right">
                            <a th:href="@{/document/searchDoc?groupid=6}">更多<i
                                    class="layui-icon layui-icon-next"></i></a>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md5">
                            <img th:src="@{/imgs/cover-design.png}" width="100%" height="100%">
                        </div>
                        <div class="layui-col-md7">
                            <div class="layui-row layui-col-space15" th:each="item,itemsStat : ${tps.g1}"
                                 th:if="${itemsStat.index} lt 5">
                                <div class="layui-col-md12">
                                    <img th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}" width="20px"
                                         height="20px"/>
                                    <a th:href="@{'/document/documentDetail?docid='+${item.docid}}"
                                       class="jie-title" th:text="${item.title}">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            实用文档
                        </div>
                        <div class="layui-col-md4" style="text-align: right">
                            <a th:href="@{/document/searchDoc?groupid=7}">更多<i
                                    class="layui-icon layui-icon-next"></i></a>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md5">
                            <img th:src="@{/imgs/cover-news.png}" width="100%" height="100%">
                        </div>
                        <div class="layui-col-md7">
                            <div class="layui-row layui-col-space15" th:each="item,itemsStat : ${tps.g2}"
                                 th:if="${itemsStat.index} lt 5">
                                <div class="layui-col-md12">
                                    <img th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}" width="20px"
                                         height="20px"/>
                                    <a th:href="@{'/document/documentDetail?docid='+${item.docid}}"
                                       class="jie-title" th:text="${item.title}">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            资格考试
                        </div>
                        <div class="layui-col-md4" style="text-align: right">
                            <a th:href="@{/document/searchDoc?groupid=8}">更多<i
                                    class="layui-icon layui-icon-next"></i></a>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md5">
                            <img th:src="@{/imgs/cover-opera.png}" width="100%" height="100%">
                        </div>
                        <div class="layui-col-md7">
                            <div class="layui-row layui-col-space15" th:each="item,itemsStat : ${tps.g3}"
                                 th:if="${itemsStat.index} lt 5">
                                <div class="layui-col-md12">
                                    <img th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}" width="20px"
                                         height="20px"/>
                                    <a th:href="@{'/document/documentDetail?docid='+${item.docid}}"
                                       class="jie-title" th:text="${item.title}">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md8">
                            专业方案
                        </div>
                        <div class="layui-col-md4" style="text-align: right">
                            <a th:href="@{/document/searchDoc?groupid=9}">更多<i
                                    class="layui-icon layui-icon-next"></i></a>
                        </div>
                    </div>
                </div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md5">
                            <img th:src="@{/imgs/cover-product.png}" width="100%" height="100%">
                        </div>
                        <div class="layui-col-md7">
                            <div class="layui-row layui-col-space15" th:each="item,itemsStat : ${tps.g4}"
                                 th:if="${itemsStat.index} lt 5">
                                <div class="layui-col-md12">
                                    <img th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}" width="20px"
                                         height="20px"/>
                                    <a th:href="@{'/document/documentDetail?docid='+${item.docid}}"
                                       class="jie-title" th:text="${item.title}">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/frame/layui/layui.js}" type="text/javascript"></script>
<script>
    layui.use(['element', 'carousel', 'form'], function () {
        const element = layui.element;
        const carousel = layui.carousel;
        const $ = layui.$;
        carousel.render({
            elem: '#test1'
            , width: '100%'
            , height: '400px'
            , arrow: 'hover'
        });

        window.showUpload = function (status) {
            if (status === 0) {
                layer.msg('您必须先登录，才能够上传文件！', {icon: 0, time: 2000});
            } else {
                const index = layer.open({
                    type: 2
                    , title: '上传文档'
                    , content: '[[@{/document/uploadDocPage}]]'
                    , area: ['1024px', '590px']
                });
            }
        };

        window.dodosearch = function () {
            location.href = '[[@{/document/searchDoc?keyword=}]]' + $('#ikey').val();
        };
    });
</script>
</body>
</html>